<template>
  <div class="version-detail" v-loading="loading">

        <topTitle title="基础信息"/>

        <el-form
            :model="detail"
            :rules="rules"
            ref="ruleForm"
            hide-required-asterisk
            label-width="120px">
            <el-form-item label="当前版本" prop="version">
                {{ this.iOSVersion }}
            </el-form-item>
            <el-form-item label="版本号" prop="version">
                <div class="version-box">
                    <el-input v-model.trim="detail.version" style="width:220px" :disabled="version"></el-input>
                </div>
            </el-form-item>
            <el-form-item label="更新方式" prop="updateType">
                <el-select v-model="detail.updateType" style="width:220px">
                    <el-option label="强制更新" :value="2"></el-option>
                    <el-option label="非强制更新" :value="1"></el-option>
                    <el-option label="非强制更新不弹窗" :value="0"></el-option>
                </el-select>
            </el-form-item>
            <el-form-item label="最低兼容版本" prop="lowVersion" v-if="detail.updateType === 1 || detail.updateType === 0">
                <el-input v-model.trim="detail.lowVersion" style="width:220px"></el-input>
            </el-form-item>
            <el-form-item label="免打扰版本" prop="highVersion">
                <el-input v-model.trim="detail.highVersion" style="width:220px"></el-input>
            </el-form-item>
            <el-form-item label="更新时间" prop="beginTime">
                <el-date-picker
                    popper-class="channel-picker"
                    :picker-options="pickerOptions"
                    v-model="detail.beginTime"
                    type="datetime"
                    placeholder="选择更新时间">
                </el-date-picker>
            </el-form-item>
            <el-form-item label="更新标题" prop="updateTitle">
                <el-input v-model.trim="detail.updateTitle" show-word-limit maxlength="10" style="width:220px"></el-input>
            </el-form-item>
            <el-form-item label="下载地址" prop="downloadUrl">
                <div class="version-box">
                    <el-input v-model.trim="detail.downloadUrl" style="width:520px"></el-input>
                </div>
            </el-form-item>
            <el-form-item label="更新文案" prop="updateContent">
                <el-input v-model="detail.updateContent" type="textarea" maxlength="100" show-word-limit :rows="5"></el-input>
            </el-form-item>
        </el-form>

        <div class="btn-box">
            <el-button type="primary" :loading="saveLoading" @click="saveForm">保存</el-button>
        </div>
  </div>
</template>

<script>
import { formatDate } from '@/utils/utils'

export default {
    data () {
        // TODO:校验版本号
        var checkVersion1 = (rule, value, callback) => {
            if (!/^\d+(?:\.\d+){1,3}$/i.test(value)) {
                callback(new Error('请输入正确版本号'))
            } else {
                callback()
            }
        }
        var checkVersion2 = (rule, value, callback) => {
            if (value <= this.minVersion && !this.version) {
                callback(new Error('当前输入版本号小于最新版本号'))
            } else {
                callback()
            }
        }
        var checkLowVersion1 = (rule, value, callback) => {
            if (value && !/^\d+(?:\.\d+){1,3}$/i.test(value)) {
                callback(new Error('请输入正确版本号'))
            } else {
                callback()
            }
        }
        var checkLowVersion2 = (rule, value, callback) => {
            if (value && value > this.detail.version) {
                callback(new Error('最低兼容版本号应小于本次更新版本号'))
            } else {
                callback()
            }
        }
        return {
            loading: false,
            version: '',
            iOSVersion: '',
            pickerOptions: {
                disabledDate (time) {
                    return time.getTime() < Date.now() - 1000 * 60 * 60 * 24
                },
                selectableRange: '00:00:00 - 23:59:59'
            },
            detail: {
                version: '', // 版本
                lowVersion: '', // 最低兼容版本
                updateType: 1, // 更新方式
                beginTime: '', // 更新时间
                updateTitle: '发现新版本',
                downloadUrl: 'https://apps.apple.com/cn/app/id1528940534',
                updateContent: '' // 更新文案
            }, // 详情
            rules: { // 详情校验
                version: [
                    { required: true, message: '请输入版本', trigger: 'blur' },
                    { validator: checkVersion2, trigger: 'blur' },
                    { validator: checkVersion1, trigger: 'blur' }
                ],
                lowVersion: [
                    { validator: checkLowVersion1, trigger: 'blur' },
                    { validator: checkLowVersion2, trigger: 'blur' }
                ],
                beginTime: [
                    { type: 'date', required: true, message: '请选择更新时间', trigger: 'change' }
                ],
                updateTitle: [
                    { required: true, message: '请输入更新标题', trigger: 'blur' }
                ],
                updateContent: [
                    { required: true, message: '请输入更新文案', trigger: 'blur' }
                ],
                downloadUrl: [
                    { required: true, message: '请输入下载地址', trigger: 'blur' }
                ]
            },
            saveLoading: false
        }
    },

    created () {
        this.minVersion = this.$route.query.main
        this.pickerOptions.selectableRange = formatDate((+new Date() + 3 * 60 * 1000), 'HH:MM:SS') + ' - 23:59:59'
        this.version = this.$route.query.version
        if (this.version) this.getDetail()
        this.getIOSVersion()
    },

    methods: {
        // 获取详情
        async getDetail () {
            this.loading = true
            let res = await this.$http.get('/apkManage/getApkDetail', {
                params: {
                    version: this.version,
                    type: 1
                }
            })
            if (res.code === '0') {
                if (res.data.beginTime) {
                    res.data.beginTime = new Date(res.data.beginTime)
                }
                this.detail = res.data
            } else {
                this.$message({
                    type: 'error',
                    message: res.desc
                })
            }
            this.loading = false
        },
        getIOSVersion () {
            this.$jsonp('http://itunes.apple.com/lookup?id=1528940534&country=cn').then(json => {
                this.iOSVersion = json.results[0].version
            }).catch(err => {
                console.log(err)
            })
        },
        // 保存前校验
        saveForm () {
            this.$refs.ruleForm.validate((valid) => {
                if (valid) {
                    this.saveChannel()
                } else {
                    return false
                }
            })
        },

        // 保存接口
        async saveChannel () {
            this.saveLoading = true
            // 如果上线时间较短
            // if (this.detail.id) {
            //     if (+new Date(this.detail.beginTime) < +new Date()) {
            //         this.$message({
            //             type: 'error',
            //             message: '请重新确认更新时间！'
            //         })
            //         this.saveLoading = false
            //         return
            //     }
            // } else {
            //     if (+this.detail.beginTime < +new Date()) {
            //         this.$message({
            //             type: 'error',
            //             message: '请重新确认更新时间！'
            //         })
            //         this.saveLoading = false
            //         return
            //     }
            // }
            let params = { ...this.detail }
            if (params.updateType === 1 || params.updateType === 0) {
                params.lowVersion = params.lowVersion || null
            } else {
                params.lowVersion = null
            }
            params.type = 1
            // 格式化时间
            params.beginTime = formatDate(this.detail.beginTime, 'YYYY-MM-DD HH:MM:SS')
            let res = await this.$http.post('/apkManage/saveApk', params)
            if (res.code === '0') {
                this.version = this.detail.version
                res.data.beginTime = new Date(res.data.beginTime)
                this.$message({
                    type: 'success',
                    message: '发布成功！'
                })
            } else {
                this.$message({
                    type: 'error',
                    message: res.desc
                })
            }
            this.saveLoading = false
        }
    }
}
</script>

<style lang="scss" scoped>
    .version-detail {
        padding-bottom: 20px;
        .version-box {
            display: flex;
            align-items: center;
        }
        // 渠道列表
        .channel-list-box {
            margin-top: 10px;
            width: 800px;
            border: 1px solid #ebeef5;
            border-bottom: none;
            border-right: none;
            .channel-title {
                display: flex;
                border-bottom: 1px solid #ebeef5;
                .channel-title-item {
                    padding: 10px;
                    border-right: 1px solid #ebeef5;
                    font-size: 14px;
                    font-weight: 700;
                    color: rgb(144, 147, 153);
                }
            }

            .channel-content {
                display: flex;
                border-bottom: 1px solid #ebeef5;
                .channel-content-item {
                    padding: 10px;
                    font-size: 14px;
                    border-right: 1px solid #ebeef5;
                    color: rgb(96, 98, 102);
                    word-break: break-all;
                    .reset-upload {
                        display: flex;
                        align-items: center;
                        justify-content: center;
                        .reset-upload-btn {
                            margin-left: 10px;
                        }
                    }
                }
            }

            .center {
                display: flex;
                align-items: center;
                justify-content: center;
            }
        }

        .btn-box {
            margin-top: 10px;
        }
    }
</style>
<style lang="scss">
    .channel-picker {
        .el-button--text {
            display: none;
        }
    }
</style>
